<% include header_index.html %>

<style>

    .header{
        width: 100vw;
        background: white;
    }
    .header_div{
        width: 355px;
        margin: 0 auto;
    }
    .header_div img{
        width: 20px;
        height:20px;
        margin-top: 12px;
    }
    .header_div p{
        font-size: 15px;
        color: #181818;
        line-height: 44px;
        text-align: center;
    }
    .inputs{
        width: 355px;
        margin: 10px;
        height:44px;
        border: none;
        border-radius: 6px;
        text-indent: 10px;
    }
    body{
        background: rgb(243,243,243);
    }
    　::-moz-placeholder {

        text-indent: 10px; /* 没有用 */
        font-size: 15px;
        line-height: 44px;
        color: #adadad;
    }
    :-ms-input-placeholder {

        text-indent: 10px;
        font-size: 15px;
        line-height: 44px;
        color: #adadad;
    }
    /*::-webkit-input-placeholder {*/

    /*text-indent: 10px;*/
    /*font-size: 15px;*/
    /*line-height: 44px;*/
    /*color: #adadad;*/
    /*}*/
    .text{
        font-size: 15px;
        margin: 10px;
        line-height:25px;
        width: 355px;
    }
    .btn{
        width: 355px;
        margin: 10px;
        background: rgb(255,127,0);
        color: white;
        font-size: 15px;
        text-align: center;
        line-height: 44px;
        height: 44px;
        border-radius: 6px;
    }
    .half{
        width: 167px;
    }
    .mr10{
        margin-right: 10px;
    }
    .huise{
        background: #adadad;
    }
</style>
<div class="big_div">
    <div class="h44 header">
        <div class="header_div h44">
            <img src="images/default_wap/return.png" class="back fl" alt="">
            <img src="images/default_wap/moreblack.png" class="back fr" alt="">
            <p>
                修改邮箱
            </p>
        </div>
    </div>
    <input type="text" class="inputs" v-model="email" placeholder="请输入新邮箱">
    <input type="text" class="inputs half fl" v-model="code" placeholder="请输入验证码">
    <div class="btn half fl" v-on:click="sendcode()" v-bind:class="{huise:sock}">{{daojishi}}</div>
    <div class="btn fl" @click="submit_change()">确认修改</div>
    <xx></xx>
</div>

<script>
    Vue.component('xx',{
        template:'<p>{{message}}<p>',
        data:function (){
            return{
                message:'sb'
            }
        }
    })
    var page = new Vue({
        el: '.big_div',
        data: {
            email:'',
            daojishi:'发送验证码',
            code:'',
            sock:false
        },
        methods:{
            sendcode:function () {
                var s="[\\w!#$%&'*+/=?^_`{|}~-]+(?:\\.[\\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\\w](?:[\\w-]*[\\w])?.)+[\\w](?:[\\w-]*[\\w])?";
                var rege = new RegExp(s);
                if(rege.test(this.email))
                {
                    if(!this.sock)
                    {
                        $.post('/change_email/send',{email:this.email},function (result) {
                            result=result.data;
                            if(result=='1')
                            {
                                page.sock=true;
                                $.toptip('發送成功', 'success');
                                fun_timedown(60);
                                console.log(result);
                            }
                            else
                            {
                                $.toptip('發送失败', 'error');
                            }

                        })
                    }
                }
                else {
                    $.toptip('邮箱格式错误', 'error');
                }


            },
            submit_change:function () {


                $.post('/change_email',{email:this.email,code:this.code},function (result) {
                    if(result==1)
                    {
                        toptip("修改成功",'success');
                        window.history.back();  //返回上一页
                    }
                    else
                    {
                        toptip("修改失敗",'error');
                    }
                })
            }
        }
    });

    function fun_timedown(time)
    {
        console.log(time);
        if(time=='undefined')
            time = 60;
        page.daojishi=time+"秒";

        time = time-1;
        if(time>=0)
        {
            setTimeout("fun_timedown("+time+")",1000);
        }else
        {
            page.daojishi="發送驗證碼";
            page.sock=false;
        }
    }
</script>






<!--底部栏-->
<% include footer.html %>
